<template>
    <div class="give-main">

        <div style="width:100%;height: 50px;border: 1px solid #eee;border-radius: 6px;">
            <div style="width: 30%;line-height: 45px;margin-left: 450px">
                <el-input placeholder="请输入关键字查询" v-model="data.key" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
        </div>

        <div class="give-content">
            <!-- <el-skeleton :rows="10" adimated :loading="data.isFirst"> -->
            <el-table :data="data.data" :border="parentBorder" v-loading="data.isload" style="width: 100%"
                @expand-change="handleExpandChange">
                <el-table-column type="expand">
                    <template #default="props">
                        <el-button type="primary" style="float:right;" @click="getCheckedKeys()">授权</el-button>
                        <div m="4">
                            <el-form-item label="权限">
                                <!-- <el-tag v-if="props.row.rights.length === 0"> 无 </el-tag>
                                    <template v-else>
                                        <el-tag style="margin-right:5px" v-for="item in props.row.rights" :key="item">{{
                                            item.name
                                        }}</el-tag>
                                    </template> -->
                                <el-tree style="max-width:100%" :data="data.tree" :expand-on-click-node="false"
                                    node-key="id" :props="defaultProps" :default-checked-keys="data.defaultCheckedKeys"
                                    show-checkbox :highlight-current="true" ref="treeRef" default-expand-all>
                                    <template #default="{ node, data }">
                                        <span class="custom-tree-node" :slot-scope="{ data }">
                                            <span>
                                                <i :class="data.icon"></i>
                                                {{ node.label }}
                                            </span>
                                        </span>
                                    </template>
                                </el-tree>
                            </el-form-item>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="序号" type="index" width="200" />
                <el-table-column label="用户名称" prop="name" />
                <el-table-column label="账号" prop="account" />
                <el-table-column label="部门" prop="depname" />
                <el-table-column label="职务" prop="dutyname" />
            </el-table>
            <!-- </el-skeleton> -->
        </div>
        <div style="margin-left: 500px;margin-top: 16px;">
            <!-- <el-pagination background :current-page="page.page" :page-size="page.limit"
                @current-change="handleCurrentChange" layout="total,prev, pager, next" :total="page.total">
            </el-pagination> -->

            <div class="table-foot" style="margin-top: 20px;">
                <el-pagination background size="small" layout="prev, pager, next" v-model:current-page="page.page"
                    v-model:page-size="page.limit" :total="page.total"/>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElLoading, ElMessage, ElMessageBox, ElTree } from 'element-plus'
import { GetAllUserRight, GetFindUserRight, GetRightTree, GiveUserRight } from '@/api/rights';
import type { Page_Dto } from '@/Dto/Page_Dto';
import type { Right_Dto } from '@/Dto/Request/right/right_Dto';
import { reactive, watchEffect } from 'vue';

const treeRef = ref<InstanceType<typeof ElTree>>()
const defaultProps = {
    children: 'children',
    id: 'id',
    label: 'name',
}
const parentBorder = ref(false)
const page = reactive<Page_Dto>({
    page: 1,
    limit: 8,
    total: 0,
})
interface Tree {
    name: string
}
const data = reactive<Right_Dto>({
    isFirst: true,
    tree: [],
    data: [],
    key: '',
    isload: true,
    dialogTableVisible: false,
    defaultCheckedKeys: [],//用户所拥有的
    defaultExpandedKeys: [],//所有的权限
    tress: [],
    childrenkeys: [],//选中的key
    parentkeys: [],//半选的key
    uid: '',
})
const methods = {

    async bind() {
        data.isload = true;
        data.isFirst = true
        const res = await GetAllUserRight({
            page: page.page,
            limit: page.limit,
            key: data.key
        })


        const res2 = await GetRightTree({});
        if (res.code === 0) {
            data.tree = res2.data
            data.data = res.data.data;
            page.total = res.data.total
            data.isFirst = false;
            data.isload = false
        }
    }
}
const handleExpandChange = async (row, expandedRows) => {
    console.log(row);
    console.log(expandedRows);
    if(expandedRows.length==0){
        data.defaultCheckedKeys=[];
    }
    data.uid = row.id;
    const res = await GetFindUserRight({
        id: data.uid
    })
    if (res.code === 0) {
        // this.defaultExpandedKeys=res.data.data,
        data.defaultCheckedKeys = res.data
    }
    if(expandedRows.length==0){
        data.defaultCheckedKeys=[];
    }
};
const getCheckedKeys = async () => {
    // data.parentkeys = data.$refs.tree.getHalfCheckedKeys();
    // data.childrenkeys = data.$refs.tree.getCheckedKeys();

    if (treeRef.value!.getCheckedKeys(false).length == 0) {
        ElMessage({
            message: '请至少选择一个',
            type: 'warning',
            plain: true,
        })
        return false;
    }

    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })

    const res = await GiveUserRight({
        id: data.uid,
        ids: treeRef.value!.getCheckedKeys(false)
    })
    if (res.code === 0) {
        ElMessage({
            message: '操作成功',
            type: 'success',
        })
        loading.close()
        data.bind()
    }

}
const handleCurrentChange = (val) => {
    page.page = val;
    data.isload = true;
    methods.bind();
}
watchEffect(() => {
    methods.bind();
})
</script>

<style scoped>

.give-main {
    width: calc(100vw - 240px);
    height: calc(100vh - 150px);
    margin: 8px;
    overflow: auto;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.give-content {
    margin-top: 16px
}

.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    padding-left: 100px;
    margin-bottom: 0;
    width: 100%;
}
</style>